<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:a4j="http://richfaces.org/a4j"
                 xmlns:rich="http://richfaces.org/rich">
    <h:head>
        <title>报销管理系统</title>
        <script type="text/javascript">
            function updateCostItemName(code, name)
            {
                document.getElementById('abrodForm:costcode').value = code;
                document.getElementById('abrodForm:costname').value = name;
            }
            function showCostItem() {
                window.open("./pubinfo/costItemList.jsf", "费用项目", "height=1024,width=800,toolbar=no,menubar=no,scrollbars=no");
            }

        </script>
        <style type="text/css">
            table.backTable input{
                border: none;
            }
            table.voucherGrid{
                width: 100%;
                border:1px solid #e2e2e2;
                border-collapse:collapse;
            }
            table.voucherGrid td{
                border:1px solid #e2e2e2;
            }

            table.checkGrid{
                width: 100%;
                border:1px solid #e2e2e2;
                border-collapse:collapse;
            }
            table.checkGrid td{
                border:1px solid #e2e2e2;
            }
            .demo_fieldset {
                margin : 20px;
                border : 1px solid #ACBECE;
            }

            .demo_legend {
                font-weight : bold;
                margin : 0px 10px 0px 18px;
                font-family: Verdana;
            }
            .inputstype{
                width: 175px !important;
            }
            .pic{
                margin-bottom: -4px;
                margin-right: -2px;
                border:none;
                width:20px;
                height:20px;
            }
        </style>
    </h:head>

    <h:form id="abrodForm">
        <rich:panel header="出国差旅费报销单" styleClass="content-hight">
            <rich:messages globalOnly="true"/>
            <rich:toolbar  itemSeparator="grida">
                <rich:toolbarGroup>
                    <h:commandLink  action="#{abroadGroupCheckBean.checkPayandRep}"
                                    disabled="#{abroadGroupCheckBean.abroad.numberStatus != '2'}">
                        <h:graphicImage value="./images/pay.png" styleClass="pic" title="支付" />
                    </h:commandLink>

                    <h:commandLink  action="#{abroadGroupCheckBean.rescind}"
                                    disabled="#{abroadGroupCheckBean.abroad.numberStatus == '2'
                                                ||abroadGroupCheckBean.abroad.numberStatus == '0'
                                                ||abroadGroupCheckBean.abroad.numberStatus == '3'}">
                        <h:graphicImage value="./images/chexiao.png" styleClass="pic" title="撤销" />
                    </h:commandLink>

                    <a4j:commandLink  execute="@this" render="abrodForm"  action="#{abroadGroupCheckBean.getFirst}"
                                      disabled="#{abroadGroupCheckBean.dis.first}">
                        <h:graphicImage value="./images/btn_page_first.gif" styleClass="pic" title="首张" />
                    </a4j:commandLink>
                    <a4j:commandLink  execute="@this" render="abrodForm"  action="#{abroadGroupCheckBean.previouse}"
                                      disabled="#{abroadGroupCheckBean.dis.previouse}">
                        <h:graphicImage value="./images/btn_page_up.gif" styleClass="pic" title="上张" />
                    </a4j:commandLink>
                    <a4j:commandLink execute="@this" render="abrodForm" action="#{abroadGroupCheckBean.next}"
                                     disabled="#{abroadGroupCheckBean.dis.next}">
                        <h:graphicImage value="./images/btn_page_down.gif" styleClass="pic" title="下张" />
                    </a4j:commandLink>
                    <a4j:commandLink  execute="@this" render="abrodForm" action="#{abroadGroupCheckBean.getLast}"
                                      disabled="#{abroadGroupCheckBean.dis.last}">
                        <h:graphicImage value="./images/btn_page_end.gif" styleClass="pic" title="末张" />
                    </a4j:commandLink>
                    <h:commandLink  action="#{abroadGroupCheckBean.goBackPayList}" >
                        <h:graphicImage value="./images/goback.png" styleClass="pic" title="返回" />
                    </h:commandLink>
                </rich:toolbarGroup>
            </rich:toolbar>
            <fieldset class="demo_fieldset">
                <legend class="demo_legend">出国差旅费</legend>   

                <h:panelGrid columns="6" id="abroadBasic" styleClass="voucherGrid" style="text-align:left">
                    <h:outputLabel value="单据编号:"/>
                    <h:outputText value="#{abroadGroupCheckBean.abroad.number}"/>

                    <h:outputLabel value="出国团组:"/>
                    <h:outputText id="groupName" value="#{abroadGroupCheckBean.abroad.group.name}"/>

                    <h:outputLabel value="国家:"/>
                    <h:outputText value="#{abroadGroupCheckBean.abroad.group.country}"/>

                    <h:outputLabel value="填表人:"/>
                    <h:outputText value="#{abroadGroupCheckBean.abroad.person}"/>

                    <h:outputLabel value="事由:"/>
                    <h:outputText value="#{abroadGroupCheckBean.abroad.affair}"/>
                    <h:outputLabel value="人员列表:"/>
                    <h:outputText value="#{abroadGroupCheckBean.abroad.group.member}"/>

                    <h:outputLabel value="费用承担部门:" />
                    <h:outputText  id="paydept"  value="#{abroadGroupCheckBean.abroad.payDept.name}"/>
                    <h:outputLabel value="报销人:" />
                    <h:outputText  id="feePerson"  value="#{abroadGroupCheckBean.abroad.feePer.cpsn_name}"/>

                    <h:outputLabel value="预算项目:"  />
                    <h:outputText  id="projName"  value="#{abroadGroupCheckBean.abroad.project.finName}"/>

                    <h:outputLabel value="附件张数:"/>
                    <h:outputText value="#{abroadGroupCheckBean.abroad.affixAmount}"/>
                    <h:outputLabel value="备注"/>
                    <h:outputText value="#{abroadGroupCheckBean.abroad.memo}"/>

                    <h:outputLabel value="填单日期:" />
                    <h:outputText value="#{abroadGroupCheckBean.abroad.numDate}" >
                        <f:convertDateTime pattern="yyyy-MM-dd" timeZone="GMT+8"/>
                    </h:outputText>

                    <h:outputLabel value="出发日期:" />
                    <h:outputText value="#{abroadGroupCheckBean.abroad.group.startDate}" >
                        <f:convertDateTime pattern="yyyy-MM-dd" timeZone="GMT+8"/>
                    </h:outputText>


                    <h:outputLabel value="返回日期:" />
                    <h:outputText value="#{abroadGroupCheckBean.abroad.group.endDate}" >
                        <f:convertDateTime pattern="yyyy-MM-dd" timeZone="GMT+8"/>
                    </h:outputText>

                    <h:outputLabel value="支付方式: "/>
                    <h:outputText value="#{abroadGroupCheckBean.abroad.payStyle.name}"/>

                </h:panelGrid>

                <h:panelGroup id="groupCost" >
                    <div style="height:auto;overflow:visible">
                        <rich:toolbar width="100%">
                            <h:outputLabel value="费用明细"/>
                        </rich:toolbar>

                        <rich:dataTable value="#{abroadGroupCheckBean.costModel}" var="co" id="fei" style=" width: 100%">

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:outputText value="行号"/>
                                </f:facet>
                                <h:outputText value="#{co.lineId}"/>
                            </rich:column>

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:outputText value="币种代码"/>
                                </f:facet>
                                <h:outputText value="#{co.currency.code}"/>
                            </rich:column>

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:outputText value="币种"/>
                                </f:facet>
                                <h:outputText id="groupCurrency#{co.lineId}" value="#{co.currency.name}"/>
                            </rich:column>

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:outputText value="住宿费"/>
                                </f:facet>
                                <h:outputText value="#{co.stayCost}">
                                    <f:convertNumber type="number" pattern="#,##0.00"/>
                                </h:outputText>
                            </rich:column>

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:outputText value="伙食补助费"/>
                                </f:facet>
                                <h:outputText value="#{co.foodCost}">
                                    <f:convertNumber type="number" pattern="#,##0.00"/>
                                </h:outputText>
                            </rich:column>

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:outputText value="公杂费"/>
                                </f:facet>
                                <h:outputText value="#{co.mixCost}">
                                    <f:convertNumber type="number" pattern="#,##0.00"/>
                                </h:outputText>
                            </rich:column>

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:outputText value="个人零用费"/>
                                </f:facet>
                                <h:outputText value="#{co.personalCost}">
                                    <f:convertNumber type="number" pattern="#,##0.00"/>
                                </h:outputText>
                            </rich:column>

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:outputText value="城市间交通费"/>
                                </f:facet>
                                <h:outputText value="#{co.trafficCost}">
                                    <f:convertNumber type="number" pattern="#,##0.00"/>
                                </h:outputText>
                            </rich:column>

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:outputText value="其他"/>
                                </f:facet>
                                <h:outputText value="#{co.other}">
                                    <f:convertNumber type="number" pattern="#,##0.00"/>
                                </h:outputText>
                            </rich:column>

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:outputText value="小计"/>
                                </f:facet>
                                <h:outputText value="#{co.other + co.trafficCost + co.personalCost + co.mixCost + co.foodCost + co.stayCost}">
                                    <f:convertNumber type="number" pattern="#,##0.00"/>
                                </h:outputText>
                            </rich:column>

                        </rich:dataTable>
                    </div>
                </h:panelGroup>



                <h:panelGroup id="groupBack" >

                    <rich:toolbar>
                        <h:outputLabel value="退领明细"/>
                    </rich:toolbar>
                    <rich:dataTable value="#{abroadGroupCheckBean.backModel}" var="tl"
                                    id="back" styleClass="backTable" style=" width: 100%;">

                        <rich:column style=" text-align:  center;">
                            <f:facet name="header">
                                <h:outputText value="行号"/>
                            </f:facet>
                            <h:outputText value="#{tl.lineId}"/>
                        </rich:column>

                        <rich:column style=" text-align:  center;">
                            <f:facet name="header">
                                <h:outputText value="币种代码"/>
                            </f:facet>
                            <h:outputText value="#{tl.currency.code}"/>
                        </rich:column>

                        <rich:column style=" text-align:  center;">
                            <f:facet name="header">
                                <h:outputText value="币种"/>
                            </f:facet>
                            <h:outputText value="#{tl.currency.name}"/>
                        </rich:column>

                        <rich:column style=" text-align:  center;">
                            <f:facet name="header">
                                <h:outputText value="预借金额"/>
                            </f:facet>
                            <h:outputText value="#{tl.advance}">
                                <f:convertNumber type="number" pattern="#,##0.00"/>
                            </h:outputText>
                        </rich:column>
                        <rich:column style=" text-align:  center;">
                            <f:facet name="header">
                                <h:outputText value="退或领"/>
                            </f:facet>
                            <h:outputText value="#{tl.sign}"/>
                        </rich:column>

                        <rich:column style=" text-align:  center;">
                            <f:facet name="header">
                                <h:outputText value="退领金额"/>
                            </f:facet>
                            <h:outputText value="#{tl.amount}">
                                <f:convertNumber type="number" pattern="#,##0.00"/>
                            </h:outputText>
                        </rich:column>

                        <rich:column style=" text-align:  center;">
                            <f:facet name="header">
                                <h:outputText value="请设置汇率"/>
                            </f:facet>
                            <h:inputText id="change" value="#{tl.currency.change}" size="15" converterMessage="请输入正确的数字。">
                                <a4j:ajax immediate="false" event="keyup" render="rmb,backTotal" listener="#{abroadGroupCheckBean.buildBackTotal}"/>
                            </h:inputText>
                            <h:message for="change" style="color:red"/>
                        </rich:column>


                        <rich:column style=" text-align:  center;">
                            <f:facet name="header">
                                <h:outputText value="退领人民币金额"/>
                            </f:facet>
                            <h:outputText id="rmb" value="#{tl.amount * tl.currency.change}">
                                <f:convertNumber type="number" pattern="#,##0.00"/>
                            </h:outputText>
                        </rich:column>                  

                    </rich:dataTable>

                    <h:outputText value="退领人民币总金额: " style="font:larger;color:#0135CF"/>
                    <h:outputText id="backTotal" value="#{abroadGroupCheckBean.backTotal}" style="color:red">
                        <f:convertNumber type="number" pattern="#,##0.00"/>
                    </h:outputText>

                </h:panelGroup>

            </fieldset>

            <fieldset class="demo_fieldset">
                <legend class="demo_legend">出国差旅费审核</legend>       

                <h:panelGrid columns="6" width="100%" id="auditorCheck" styleClass="checkGrid" style="text-align:left">

                    <h:outputLabel value="核定金额:"  />
                    <h:outputText value="#{abroadGroupCheckBean.abroad.checkaccount}">
                        <f:convertNumber type="number" pattern="#,##0.00"/>
                    </h:outputText>

                    <h:outputText value="支出渠道:" />
                    <h:outputText value="#{abroadGroupCheckBean.abroad.costTypes.name}"/>

                    <h:outputText value="预算来源："  />
                    <h:outputText value="#{abroadGroupCheckBean.abroad.budgetSource}"/>

                    <h:outputText value="支出类别:" />
                    <h:outputText value="基本支出" rendered="#{abroadGroupCheckBean.abroad.costClass == '0'}"/>
                    <h:outputText value="项目支出" rendered="#{abroadGroupCheckBean.abroad.costClass == '1'}"/>

                    <h:outputLabel value="经济分类:" />
                    <h:outputText value="#{abroadGroupCheckBean.abroad.costitem.name}" />

                    <h:outputText value="支付令:"/>
                    <h:outputText value="#{abroadGroupCheckBean.abroad.paycode}"/>

                    <h:outputText value="审核人" />
                    <h:outputText value="#{abroadGroupCheckBean.abroad.auditor}"/>

                    <h:outputLabel value="审核日期:" />
                    <h:outputText value="#{abroadGroupCheckBean.abroad.auditDate}">
                        <f:convertDateTime pattern="yyyy年MM月dd日" timeZone="GMT+8"/>
                    </h:outputText>
                </h:panelGrid>
            </fieldset>

            <fieldset class="demo_fieldset">
                <legend class="demo_legend">出国差旅费支付</legend>

                <h:panelGrid columns="4" width="100%" border="0" id="payform" style="text-align:left">

                    <h:outputLabel value="支付方式: " />
                    <h:panelGroup >
                        <h:selectOneMenu value="#{abroadGroupCheckBean.payWay}"
                                         valueChangeListener="#{abroadGroupCheckBean.payWayChange}"
                                         style=" width: 198px;"
                                         disabled="#{abroadGroupCheckBean.abroad.numberStatus != '2'}">
                            <f:selectItem itemValue=" " itemLabel="-请选择-"/>
                            <f:selectItems value="#{abroadGroupCheckBean.payStyleList}" />
                            <a4j:ajax event="change" render="payform" listener="#{abroadGroupCheckBean.changeCashPaid}" />
                        </h:selectOneMenu>
                    </h:panelGroup> 

                    <h:outputLabel value="支付凭证号:" />
                    <h:panelGroup>
                        <h:panelGroup rendered="#{abroadGroupCheckBean.abroad.numberStatus == '2'}">
                            #{abroadGroupCheckBean.abroad.number}
                            <h:inputText size="21" value="#{abroadGroupCheckBean.abroad.ticketcode}"/>
                        </h:panelGroup>
                        <h:outputLabel value="#{abroadGroupCheckBean.abroad.ticketcode}"
                                       style="margin-left: 0px;padding-left: 0px;"
                                       rendered="#{abroadGroupCheckBean.abroad.numberStatus != '2'}"/>
                    </h:panelGroup>

                    <h:outputLabel value="支付金额:" />
                    <h:inputText  id="payaccount" size="28" value="#{abroadGroupCheckBean.abroad.payaccount}"
                                  disabled="#{abroadGroupCheckBean.abroad.numberStatus != '2'}">
                        <f:convertNumber type="number" pattern="#,##0.00"/>
                    </h:inputText>


                    <h:outputLabel value="收款人:" rendered="#{abroadGroupCheckBean.abroad.payStyle.type eq '1'}"/>
                    <h:inputText  id="reciveName"   size="28" value="#{abroadGroupCheckBean.abroad.receive}"
                                  rendered="#{abroadGroupCheckBean.abroad.payStyle.type eq '1'}"
                                  disabled="#{abroadGroupCheckBean.abroad.numberStatus != '2'}"/>

                    <h:outputLabel value="出纳:" />
                    <h:inputText  id="payer"   size="28" value="#{abroadGroupCheckBean.abroad.payer}" disabled="true" />

                    <h:outputLabel value="支付日期:" />
                    <h:panelGroup>
                        <rich:calendar value="#{abroadGroupCheckBean.abroad.payDate}"
                                       locale="zh_CN" disabled="true"
                                       popup="true"
                                       datePattern="yyyy-MM-dd"
                                       showApplyButton="false" inputClass="inputstype" />
                    </h:panelGroup>
                    <h:outputLabel value="现金付讫:" style="color:red"/>
                    <h:selectOneRadio id="cashPaid"  value="#{abroadGroupCheckBean.abroad.cashPaid}"
                                      disabled="#{abroadGroupCheckBean.abroad.numberStatus != '2'}">
                        <f:selectItem itemLabel="是" itemValue="1"/>
                        <f:selectItem itemLabel="否" itemValue="0"/>
                    </h:selectOneRadio>

                    <h:outputLabel value="支付完毕:" style="color:red"/>
                    <h:selectOneRadio id="numberStatus"  value="#{abroadGroupCheckBean.abroad.numberStatus}"
                                      disabled="#{abroadGroupCheckBean.abroad.numberStatus != '2'}">
                        <f:selectItem itemLabel="是" itemValue="6"/>
                        <f:selectItem itemLabel="否" itemValue="4"/>
                    </h:selectOneRadio>
                </h:panelGrid>
            </fieldset>

        </rich:panel>
    </h:form>
</ui:composition>